<!DOCTYPE>
<html>
<head>
    <title>
        登录界面
    </title>

    <!-- js 引用-->
    <script src="/jquery-3.2.1.min.js" type="text/javascript"></script>
    <script src="/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="/bootstrap/js/bootstrapValidator.js" type="text/javascript"></script>
    <script src="/layer/layer.js" type="text/javascript"></script>
    <script src="/bootstrap/js/language/zh_CN.js" type="text/javascript"></script>

    <!-- css 引用-->
    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="/bootstrap/css/bootstrapValidator.css" rel="stylesheet" type="text/css" />
    <link href="/app_css/login.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">
        $(function() {
            $("#myform").bootstrapValidator({
                live: 'disabled', //验证时机，enabled是内容有变化就验证（默认），disabled和submitted是提交再验证
                excluded: [':disabled', ':hidden', ':not(:visible)'], //排除无需验证的控件，比如被禁用的或者被隐藏的
                //submitButtons: '#btn', //指定提交按钮，如果验证失败则变成disabled，但我没试成功，反而加了这句话非submit按钮也会提交到action指定页面
                message: '通用的验证失败消息', //好像从来没出现过
                feedbackIcons: { //根据验证结果显示的各种图标
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    username: {
                        validators: {
                            notEmpty: {
                                message: '账号不能为空!'
                            }
                        }
                    },
                    password: {
                        validators: {
                            notEmpty: {
                                message: '密码不能为空!'
                            }
                        }
                    }
                }
            });

            $("#btn").click(function () { //非submit按钮点击后进行验证，如果是submit则无需此句直接验证
                $("#myform").bootstrapValidator('validate'); //提交验证
                if ($("#myform").data('bootstrapValidator').isValid()) { //获取验证结果，如果成功，执行下面代码
                    var bool = loginCheck();
                    if (bool) {
                        document.getElementById("myform").submit();
                    }
                }
            });
        });

        //登录验证方法
        function loginCheck() {
            var name = $("#loginName").val().trim();
            var pwd = $("#loginPwd").val().trim();
            if (name == "" || pwd == "") {
                return false;
            }

            var form = new FormData(document.getElementById("myform"));
            var datas = new Object();

            $.ajax({
                url:"/loginApprove",
                type:"post",
                data:form,
                processData:false,
                contentType:false,
                async:false,
                success:function(data){
                    datas = data;
                },

                error:function(e){
                    alert("错误！！");
                }
            });

            console.info(datas)
            if(datas.result == "nameFalse"){ //用户名不正确
                layer.tips('用户名不存在！', '#loginName', {
                    tips: [2, '#FF3030'],
                    time: 2000
                });

                return false;
            }else if(datas.result == "pwdFalse"){ //密码不正确

                layer.tips('密码不正确！', '#loginPwd', {
                    tips: [2, '#FF3030'],
                    time: 2000
                });

                return false;
            }else{
                return true;
            }
        }
    </script>
</head>
<body>
<form id="myform" class="required-validate" action="/stdList" method="post" ">
    <div class="mycenter">
        <div class="mysign">
            <div class="col-lg-11 text-center text-info">
                <h2>请登录</h2>
            </div>

            <div class="form-group">
                <div class="col-lg-10">
                    <input id="loginName" name="username" type="text" class="form-control" placeholder="请输入账户名" autofocus/>
                </div>
            </div>

            <div class="col-lg-10"></div>

            <div class="form-group">
                <div class="col-lg-10">
                    <input id="loginPwd" name="password" type="password" class="form-control" placeholder="请输入密码" autofocus/>
                </div>
            </div>
            <div class="col-lg-10"></div>
            <div class="col-lg-10 mycheckbox checkbox">
                <input type="checkbox" class="col-lg-1">记住密码</input>
            </div>
            <div class="col-lg-10"></div>
            <div class="col-lg-10">
                <button id="btn" type="button" class="btn btn-success col-lg-12">登录</button>
            </div>
        </div>
    </div>
</form>
</body>
</html>